<template lang="html">
  <div>
    <sui-table unstackable>
      <sui-table-header>
        <sui-table-row>
          <sui-table-header-cell>Name</sui-table-header-cell>
          <sui-table-header-cell>Status</sui-table-header-cell>
          <sui-table-header-cell text-align="right"
            >Description</sui-table-header-cell
          >
        </sui-table-row>
      </sui-table-header>
      <sui-table-body>
        <sui-table-row>
          <sui-table-cell>John</sui-table-cell>
          <sui-table-cell>Approved</sui-table-cell>
          <sui-table-cell text-align="right">None</sui-table-cell>
        </sui-table-row>
        <sui-table-row>
          <sui-table-cell>Jamie</sui-table-cell>
          <sui-table-cell>Approved</sui-table-cell>
          <sui-table-cell text-align="right">Requires call</sui-table-cell>
        </sui-table-row>
        <sui-table-row>
          <sui-table-cell>Jill</sui-table-cell>
          <sui-table-cell>Denied</sui-table-cell>
          <sui-table-cell text-align="right">None</sui-table-cell>
        </sui-table-row>
      </sui-table-body>
    </sui-table>
    <sui-table stackable>
      <sui-table-header>
        <sui-table-row>
          <sui-table-header-cell>Name</sui-table-header-cell>
          <sui-table-header-cell>Status</sui-table-header-cell>
          <sui-table-header-cell text-align="right"
            >Description</sui-table-header-cell
          >
        </sui-table-row>
      </sui-table-header>
      <sui-table-body>
        <sui-table-row>
          <sui-table-cell>John</sui-table-cell>
          <sui-table-cell>Approved</sui-table-cell>
          <sui-table-cell text-align="right">None</sui-table-cell>
        </sui-table-row>
        <sui-table-row>
          <sui-table-cell>Jamie</sui-table-cell>
          <sui-table-cell>Approved</sui-table-cell>
          <sui-table-cell text-align="right">Requires call</sui-table-cell>
        </sui-table-row>
        <sui-table-row>
          <sui-table-cell>Jill</sui-table-cell>
          <sui-table-cell>Denied</sui-table-cell>
          <sui-table-cell text-align="right">None</sui-table-cell>
        </sui-table-row>
      </sui-table-body>
    </sui-table>
  </div>
</template>

<script>
export default {
  name: 'TableStackingExample',
};
</script>
